<div class="form-group clearfix">
  <div class="pull-left form-inline">
    <button type="button" class="btn btn-default" (click)="showAddModal();">新建权限</button>
    <button type="button" class="btn btn-success" (click)="showTreeModal();">查看推客目录树</button>
  </div>
</div>

<div>
  <nz-spin [nzTip]="'正在读取权限列表...'" [nzSpinning]="_isSpinning" [nzSize]="'large'" class="admin-spin">
    <table class="table">
      <thead>
      <tr>
        <th>ID</th>
        <th>权限名称</th>
        <th>权限等级</th>
        <th>权限状态</th>
        <th>权限排序</th>
        <th>创建时间</th>
        <th>修改时间</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let item of permissionList">
        <td>{{item.id}}</td>
        <td>{{item.permission_name}}</td>
        <td>{{item.permission_level}}</td>
        <td>{{item.permission_status == 1 ? '启用中': '停用中' }}</td>
        <td>{{item.sort}}</td>
        <td>{{item.created_at}}</td>
        <td>{{item.updated_at}}</td>
        <td>
          <a href="javascript:;" (click)="showAddModal(item)">添加子权限</a>-
          <a href="javascript:;" (click)="showEditModal(item)">修改</a>-
          <a href="javascript:;" (click)="showDelModal(item.id)">删除</a>
        </td>
      </tr>
      </tbody>
    </table>
  </nz-spin>
  <div class="text-center">
    <pagination (pageChanged)="pageChanged($event)" [totalItems]="totalItems" [itemsPerPage]="itemsPerPage"
                [(ngModel)]="currentPage"
                previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;"
                [boundaryLinks]="true" class="pagination-sm"></pagination>
  </div>
</div>

<app-notification [type]="type" [message]="message" [isShow]="isShow"
                  (promptIsShow)="promptIsShow($event)"></app-notification>

<!-- 添加权限 -->
<div class="modal fade" bsModal #addModal="bs-modal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">新建权限</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="addModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form #addPermissionForm="ngForm" (ngSubmit)="addPermissionSubmit()">
          <div class="form-group clearfix">
            <label class="col-md-2">权限名称</label>
            <div class="col-md-6">
              <input type="text" class="form-control" id="permission_name" [(ngModel)]="addPermission.permission_name"
                     name="permission_name" required>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-2">所属父类</label>
            <div class="col-md-6">
              <ng-container *ngIf="permissionTree.length > 0">
                <select #select class="form-control" (change)="log(select);" [(ngModel)]="addPermission.parent_id"
                        [ngModelOptions]="{standalone: true}">
                  <option value="{{ option.parent_id == -1 ? -1 : option.id }}" *ngFor="let option of permissionTree">{{
                    (option.parent_id != -1 ? option.split +  option.label :option.label) }}
                  </option>
                </select>
              </ng-container>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-2">路径</label>
            <div class="col-md-6">
              <input type="text" class="form-control" id="action" [(ngModel)]="addPermission.action" name="action"
                     required>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-2">角色排序</label>
            <div class="col-md-6">
              <input type="number" class="form-control" id="sort" [(ngModel)]="addPermission.sort" name="sort" required>
            </div>
          </div>
          <div class="text-center mt20">
            <button class="btn btn-default btn-md-long" type="button" (click)="addModal.hide()">取  消</button>
            <button class="btn btn-success btn-md-long" type="submit" [disabled]="!addPermissionForm.form.valid">提　交
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- 修改角色 -->
<div class="modal fade" bsModal #editModal="bs-modal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">修改权限</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="editModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form #editPermissionForm="ngForm" (ngSubmit)="editPermissionSubmit()">
          <div class="form-group clearfix">
            <label class="col-md-2">权限名称</label>
            <div class="col-md-6">
              <input type="text" class="form-control" id="permission_name" [(ngModel)]="editPermission.permission_name"
                     name="permission_name" required>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-2">所属父类</label>
            <div class="col-md-6">
              <ng-container *ngIf="permissionTree.length > 0">
                <select #select class="form-control" (change)="log(select);" [(ngModel)]="editPermission.parent_id"
                        [ngModelOptions]="{standalone: true}">
                  <option value="{{ option.parent_id == -1 ? -1 : option.id }}" *ngFor="let option of permissionTree">{{
                   (option.parent_id != -1 ? option.split + option.label :option.label) }}
                  </option>
                </select>
              </ng-container>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-2">路径</label>
            <div class="col-md-6">
              <input type="text" class="form-control" id="action" [(ngModel)]="editPermission.action" name="action"
                     required>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-2">角色排序</label>
            <div class="col-md-6">
              <input type="number" class="form-control" id="sort" [(ngModel)]="editPermission.sort" name="sort"
                     required>
            </div>
          </div>
          <!--<div class="form-group clearfix">-->
          <!--<label class="col-md-2">权限排序</label>-->
          <!--<div class="col-md-6">-->
          <!--<input type="number" class="form-control" id="sort" [(ngModel)]="editPermission.sort" name="sort"-->
          <!--required>-->
          <!--</div>-->
          <!--</div>-->
          <!--<div class="form-group clearfix">-->
          <!--<label class="col-md-2">权限状态</label>-->
          <!--<div class="col-md-6">-->
          <!--<select name="permission_status" id="permission_status" class="form-control"-->
          <!--[(ngModel)]="editPermission.permission_status" [ngModelOptions]="{standalone: true}">-->
          <!--<option value="1">启用</option>-->
          <!--<option value="0">停用</option>-->
          <!--</select>-->
          <!--</div>-->
          <!--</div>-->
          <div class="text-center mt20">
            <button class="btn btn-default btn-md-long" type="button" (click)="editModal.hide()">取消</button>
            <button class="btn btn-success btn-md-long" type="submit" [disabled]="!editPermissionForm.form.valid">提　交
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- 删除权限 -->
<div class="modal fade" bsModal #delModal="bs-modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">提示</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="delModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body text-center">
        是否确认删除
      </div>
      <div class="modal-footer mt20">
        <button class="btn btn-default btn-md-long" type="button" (click)="delModal.hide()">取消</button>
        <button class="btn btn-success btn-md-long" type="submit" (click)="delPermission()">确定</button>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" bsModal #treeModal="bs-modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content" style="position: relative;">
      <img style="width:750px;height:800px;position: absolute;left:50%;transform: translateX(-50%)" src="/assets/images/tuike_tree.png">
    </div>
  </div>
</div>

